/* eslint-disable react/prop-types */
import { useState, useEffect } from 'react'
function MyDialog ({
  title,
  visible,
  children,
  onOk = () => {},
  onCancel = () => {}
}) {
  const [show, setShow] = useState(visible)
  const ok = () => {
    onOk()
    setShow(false)
  }
  const cancel = () => {
    onOk()
    setShow(false)
  }
  useEffect(
    () => {
      setShow(visible)
    },
    [visible]
  )
  return (
    <section style={{ display: show ? 'block' : 'none' }}>
      <main>
        <header>{title}</header>
        {children}
        <footer>
          <button onClick={ok}>ok</button>
          <button onClick={cancel}>cancel</button>
        </footer>
      </main>
    </section>
  )
}

export default MyDialog
